<template>
  <el-dialog
    v-model="props.open"
    align-center
    :before-close="handleClose"
    title="Address"
    append-to-body
    width="480"
  >
    <el-form label-position="top" :model="form" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="Recipient">
            <el-input v-model="form.Recipient" /> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="Phone">
            <el-input v-model="form.Phone" /> </el-form-item
        ></el-col>
      </el-row>
      <el-form-item label="Address">
        <el-input v-model="form.Address" />
      </el-form-item>
      <el-form-item label="Address2（Optional）">
        <el-input v-model="form.Recipient" />
      </el-form-item>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="City">
            <el-input v-model="form.Phone" /> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item label="Province">
            <el-input v-model="form.Address" /> </el-form-item
        ></el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="Zip">
            <el-input v-model="form.Address" /> </el-form-item
        ></el-col>
        <el-col :span="12"></el-col>
      </el-row>

      <el-form-item>
        <div class="jc">
          <el-button type="default" @click="handleClose">Cancel</el-button>

          <el-button type="danger" @click="onSubmit">Confirm</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
// const textarea = ref("");
const props = defineProps(["open"]);
const emits = defineEmits(["handleClose"]);
const handleClose = () => {
  emits("handleClose");
};
const form = reactive({
  Recipient: "",
  Phone: "",
  Address: "",
  Address2: "",
  City: "",
  Province: "",
  Zip: "",
});

const onSubmit = () => {
  console.log(form, "submit!");
};
</script>
<style lang="scss" scoped>
.jc {
  width: 100%;
  text-align: center;
  margin: 20px 0 -18px 0;
}
</style>
